<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
</head>
<body>
<!--搜索框-->
<form class="layui-form layui-form-pane" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">筛选数据</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="title" id="memReload" autocomplete="off" placeholder="请输入查询条件" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select  id="sexSearch" lay-search="">
                    <option value="">选择性别</option>
                    <option value="0">男</option>
                    <option value="1">女</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select  id="statusSearch" lay-search="">
                    <option value="">选择状态</option>
                    <option value="0">待审核</option>
                    <option value="1">通过</option>
                    <option value="2">驳回</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属社团</label>
            <div class="layui-input-inline" lay-filter="group">
                <select id="comSelect"  lay-search="">

                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">所属班级</label>
            <div class="layui-input-inline" lay-filter="group">
                <select id="classSelect"  lay-search="">

                </select>
            </div>
        </div>
        <div class="layui-inline" id="headerContent">
            <button type="button" class="layui-btn" data-type="reload">查询</button>
        </div>
    </div>
</form>
<table id="memList" lay-filter="memList" ></table>
<div id="rejectReasons" style="display: none">
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">驳回理由</label>
        <div class="layui-input-block">
            <textarea placeholder="请填写您驳回的理由，以便申请人再次申请" id="rejectReason" name="rejectReason" class="layui-textarea"></textarea>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="comBar">
    <a class="layui-btn layui-btn-xs" lay-event="pass">通过</a>
    <a class="layui-btn layui-btn-xs" lay-event="reject">驳回</a>
</script>


<script src="../lib/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['table','form','layer','jquery','laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        //加载社团筛选数据
        $.ajax({
            type:'get',
            url:'/communityList',
            dataType:'json',
            success:function (res) {
                if (res.state == true){
                    var dataList = res.data;
                    $("#comSelect").html("");
                    var option = "<option value=''>请选择社团</option>";
                    for (var i = 0; i < dataList.length; i++) {
                        option += "<option value='"+dataList[i].id+"'>"+dataList[i].name+"</option>";
                    }
                    $("#comSelect").html(option);
                    form.render();
                } else {
                    layer.msg(res.msg,{icon:3})
                }
            }
        });
        //加载班级列表
        $.ajax({
            type:'get',
            url:'/classList?isFaculty=false',
            dataType:'json',
            success:function (res) {
                if (res.state == true){
                    var dataList = res.data;
                    $("#classSelect").html("");
                    var option = "<option value=''>请选择班级</option>";
                    for (var i = 0; i < dataList.length; i++) {
                        option += "<option value='"+dataList[i].id+"'>"+dataList[i].name+"</option>";
                    }
                    $("#classSelect").html(option);
                    form.render();
                } else {
                    layer.msg(res.msg,{icon:3})
                }
            }
        });

        //获取社团数据
        table.render({
            elem: '#memList'
            ,height: 440
            ,url: '/userCheck' //数据接口
            ,request:{
                pageName: 'pageNumber' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            ,response: {
                countName: 'total'
            }
            ,page: true //开启分页
            ,totalRow:true
            ,cellMinWidth: 70
            ,even:true
            ,skin:'line'
            ,limit: 10
            ,cols: [[ //表头
                {field: 'id', hide:'true'}
                ,{field: 'name', title: '姓名',align:'center'}
                ,{field: 'sex', title: '性别', align:'center',templet:'#sex'}
                ,{field: 'hobby', title: '爱好' ,align:'center',templet:'#hobby'}
                ,{field: 'className', title: '班级', align:'center'}
                ,{field: 'comName', title: '社团', align:'center'}
                ,{field: 'telephone', title: '手机号码',align:'center'}
                ,{field: 'email', title: '邮箱', align:'center'}
                ,{field: 'status', title: '状态', sort: true,align:'center',templet:'#status'}
                ,{title:'操作',toolbar:'#comBar'}
            ]],
            id:'memTable'
        });
        //监听工具条
        table.on('tool(memList)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'pass'){ //通过
                layer.confirm('确认通过'+data.name+'加入社团？',{icon: 3, title:'提示：此操作不可逆'}, function(index){
                    obj.del();
                    //发送服务端
                    data.status = '1';
                    $.ajax({
                        url:'/user',
                        type:'post',
                        data:data,
                        dataType:'json',
                        success:function (res) {
                            if (res.state == true) {//通过成功
                                layer.msg('已通过', {icon:1,time:1000},function(){
                                    setTimeout('window.location.reload()',200);
                                });
                            }else {//通过失败
                                layer.msg(res.msg, {icon:3,time:1000},function(){
                                    setTimeout('window.location.reload()',1000);
                                });
                            }
                        }
                    });
                    layer.close(index);
                });
            } else if(layEvent === 'reject'){ //驳回
                layer.confirm('确认驳回“'+data.name+'”加入社团？',{icon: 3, title:'提示：此操作不可逆'}, function(index){
                    layer.open({
                        type: 1,
                        title:["填写驳回信息", 'font-size:14px; font-weight: 700;'],
                        btn:['确认驳回','取消驳回'],
                        btnAlign: 'c',
                        content: $('#rejectReasons'),
                        area: ['700px','220px'],
                        closeBtn:2,
                        yes: function(index, layero){
                            var rejectReason = $("#rejectReason").val();
                            console.log(rejectReason)
                            if (rejectReason != null || rejectReason.trim() != ""){
                                data.rejectReason = rejectReason;
                            }
                            data.status = '2';//驳回状态位
                            $.ajax({
                                type:'post',
                                url:'/user',
                                data:"id="+data.id+"&rejectReason="+data.rejectReason+"&status="+data.status,
                                dataType:'json',
                                success:function (res) {
                                    if (res.state == true){
                                        layer.msg('驳回成功', {icon:1,time:1000},function(){
                                            //关闭弹框
                                            layer.load(2);
                                            layer.close(index);
                                            setTimeout('window.location.reload()',500);
                                        });
                                    }else {
                                        layer.msg(res.msg, {icon:3,time:1000});
                                    }
                                }
                            });
                        },
                        btn2:function (index,layero) {
                            //取消修改，关闭弹框
                            layer.close(index);
                        }
                    });
                    layer.close(index);
                });
            }
        });
        //添加社团弹框
        var active = {
            reload: function(){
                var memReload = $('#memReload'); //获取输入框的id
                var sex = $('#sexSearch');
                var statue = $('#statusSearch');
                var comSelect = $('#comSelect');
                var classSelect = $('#classSelect');

                //执行重载
                table.reload('memTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        searchKey: memReload.val(),
                        sex: sex.val(),
                        status: statue.val(),
                        comId: comSelect.val(),
                        classId: classSelect.val()
                    }
                }, 'data');
            }
        }

        $('#headerContent .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
        $('#headerContent .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //日期
        laydate.render({
            elem: '#dates'
        });

    });
</script>
<script type="text/html" id="status">
    {{#  if(d.status == 0){ }}
    待审核
    {{#  } else if(d.status == 1 ) { }}
    通过
    {{#  }else if(d.status == 2 ) { }}
    驳回
    {{#  }
    }}
</script>
<script type="text/html" id="sex">
    {{#  if(d.sex == 0){ }}
    男
    {{#  } else if(d.sex == 1 ) { }}
    女
    {{#  }else { }}
    未知
    {{#  }
    }}
</script>


</html>